<template>
  <div class="themes">
    <div class="title">Hackathon Themes</div>
    <div class="list">
      <div v-for="(item, index) in themeList" :key="index" class="item">
        <div class="item-theme">{{ item.theme }}</div>
        <div v-for="(ele, i) in item.content" :key="i" class="item-info">
          {{ ele.id ? ele.id + '. ' : '' }}
          <span class="info-bold">{{ ele.bold }}</span>
          {{ ele.text }}
        </div>
      </div>
    </div>
    <img
      src="@/assets/images/pc_mentors_corner1.png"
      alt=""
      class="mentors-corner1"
    />
    <img
      src="@/assets/images/pc_mentors_corner2.png"
      alt=""
      class="mentors-corner2"
    />
    <div class="price-border">
      <div class="left"></div>
      <div class="right"></div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const themeList = ref([
  {
    theme: 'Theme1: Infrastucture',
    content: [
      {
        id: 1,
        bold: 'Scalability challenges:',
        text: 'Developing solutions to increase the transaction throughput and processing capability of blockchain networks to achieve efficient large-scale transaction processing and data storage.',
      },
      {
        id: 2,
        bold: 'Security and privacy protection:',
        text: "Constructing blockchain infrastructure with heightened security and privacy measures to ensure the safety of participants' data and transactions and provide anonymity protection for users.",
      },
      {
        id: 3,
        bold: 'Decentralized identity authentication:',
        text: "Designing innovative decentralized identity verification mechanisms to ensure the verification of participants' identities and the accuracy of data, offering users a convenient and secure identity authentication solution.",
      },
      {
        id: 4,
        bold: 'Cross-chain interoperability:',
        text: 'Building solutions that support interoperability across different blockchain platforms, enabling seamless flow of assets and data, and promoting interconnectedness between different blockchain ecosystems.',
      },
    ],
  },
  {
    theme: 'Theme 2: Web3 Dapps',
    content: [
      {
        id: 1,
        bold: 'RWA & RWAFi:',
      },
      {
        text: 'Participants can explore the following areas:',
      },
      {
        id: 1,
        bold: 'Digitalization and securitization of RWA:',
        text: 'Investigate how to digitize real-world assets and transform them into encrypted assets for easier management and trading.',
      },
      {
        id: 2,
        bold: 'Decentralized trading of RWA:',
        text: 'Design decentralized trading platforms or protocols, allowing investors to directly participate in the trading of real-world assets, achieving higher liquidity and accessibility.',
      },
      {
        id: 3,
        bold: 'Identity and verification of RWA:',
        text: 'Research and implement trustworthy identity verification solutions for RWA to ensure the authenticity and ownership of assets.',
      },
      {
        id: 4,
        bold: 'Measurement and valuation of RWA:',
        text: 'Explore how to accurately measure and value real-world assets, providing investors with reliable references and decision-making bases.',
      },
      {
        id: 2,
        bold: 'LSD & LSDFi:',
      },
      {
        text: 'Participants can delve into the following areas:',
      },
      {
        id: 1,
        bold: 'LSDFi protocols and platforms:',
        text: 'Design and build protocols or platforms that support LSDFi, allowing users holding POS tokens to connect their collateral liquidity with the DeFi ecosystem.',
      },
      {
        id: 1,
        bold: 'Tokenization of liquidity:',
        text: 'Investigate how to transform POS tokens into liquidity tokens for trading in liquidity pools, and earn profits through rewards for liquidity providers.',
      },
      {
        id: 1,
        bold: 'LSDFi strategies and tools:',
        text: 'Design strategies and tools for users offering LSDFi, providing methods to maximize profits and manage risks.',
      },
      {
        id: 1,
        bold: 'Cross-chain LSDFi:',
        text: 'Contemplate how to foster cross-chain interoperability of LSDFi among different blockchain networks, facilitating the liquidity collateral and trading of different POS tokens.',
      },
    ],
  },
])
</script>

<style lang="scss" scoped>
.themes {
  margin-top: 160px;
  position: relative;
  .title {
    font-size: 90px;
    line-height: 108px;
    color: #5cd848;
    text-align: center;
    font-family: poppins-bold;
  }
  .list {
    margin-top: 79px;
    .item {
      .item-theme {
        color: #5cd848;
        font-size: 40px;
        line-height: 48px;
        font-family: PingFangSC-Regular;
        margin-top: 20px;
      }
      .item-info {
        font-size: 20px;
        color: #d5d5d5;
        line-height: 44px;
        margin-top: 15px;
        .info-bold {
          color: #fff;
          font-weight: bold;
        }
      }
    }
  }
  .mentors-corner1 {
    position: absolute;
    right: -250px;
    top: 0;
  }
  .mentors-corner2 {
    position: absolute;
    left: -250px;
    bottom: 100px;
  }
  .price-border {
    height: 0px;
    width: 1616px;
    height: 1px;
    margin: 100px -218px;
    display: flex;
    align-items: center;
    .left {
      width: 50%;
      height: 1px;
      background: linear-gradient(270deg, #5cd848 0%, rgba(92, 216, 72, 0.06));
    }
    .right {
      width: 50%;
      height: 1px;
      background: linear-gradient(90deg, #5cd848 0%, rgba(92, 216, 72, 0.06));
    }
  }
}
@media screen and (max-width: 1180px) {
  .themes {
    margin-top: 100px;
    .title {
      margin-left: -10px;
      margin-right: -10px;
      font-size: 32px;
      line-height: 38px;
    }
    .list {
      margin-top: 0;
      .item {
        .item-theme {
          font-size: 18px;
          line-height: 22px;
          margin-top: 37px;
        }
        .item-info {
          font-size: 14px;
          line-height: 28px;
          margin-top: 12px;
        }
      }
    }
    .mentors-corner1 {
      width: 54px;
      height: 54px;
      top: -54px;
      right: -30px;
    }
    .mentors-corner2 {
      width: 54px;
      height: 54px;
      left: -15px;
      bottom: 30px;
    }
    .price-border {
      height: 0px;
      width: 100%;
      border-top: 1px dashed #fff;
      margin: 100px auto 0;
    }
  }
}
</style>
